<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 -colorbox弹层实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<link href="../js/colorbox/colorbox.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.checkbox.js"></script>
</head>
<script type="text/javascript">
$(function(){
	$('#checkboxSelectAll').checkbox('input[type="checkbox"].list-id');
	$('#checkbox-all-btn').checkbox_all('input[type="checkbox"].list-id');
	$('#checkbox-none-btn').checkbox_none('input[type="checkbox"].list-id');
	$('#checkbox-anti-btn').checkbox_anti('input[type="checkbox"].list-id');
	//提交表单
	$('#sumit-btn').on("click", function(){
		var listId=$.checkbox_get_id('input[type="checkbox"].list-id');
		alert(listId);
	});
	//单个checkbox选中，更改背景色
	$('input[type="checkbox"].list-id').checkbox_active();
});
</script>
<body>
<div class="container mt30">
	<input type="button" name="select-all-btn" value="全选" class="btn btn-success btn-sm" id="checkbox-all-btn">
	<input type="button" name="select-all-btn" value="全不选" class="btn btn-primary btn-sm" id="checkbox-none-btn">
	<input type="button" name="select-all-btn" value="反选" class="btn btn-secondary btn-sm" id="checkbox-anti-btn">

	<table class="table table-bordered table-hover mt20">
		<caption>测试全选插件：</caption>
		<thead>
			<tr>
				<th width="40"><input type="checkbox" name="select-all" id="checkboxSelectAll"></th>
				<th>T1</th>
				<th>T2</th>
				<th>T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" name="select-list" value="1" class="list-id"></td>
				<td>A1</td>
				<td align="center">B1</td>
				<td>C1</td>
			</tr>		
			<tr>
				<td><input type="checkbox" name="select-list" value="2" class="list-id"></td>
				<td>A2</td>
				<td align="center">B2</td>
				<td>C2</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="select-list" value="3" class="list-id"></td>
				<td>A3</td>
				<td align="center">B3</td>
				<td>C3</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="select-list" value="4" class="list-id"></td>
				<td>A4</td>
				<td align="center">B4</td>
				<td>C4</td>
			</tr>				
		</tbody>
	</table>

	<input type="button" name="sumit-btn" value="提交" class="btn btn-danger" id="sumit-btn">
</div>
</body>
</html>